<template>
  <div class="weather-suggestion-section">
    <div class="section-header">穿搭建议</div>
    <div class="suggestion-content">
      <div class="suggestion-item">
        <div class="suggestion-item-content suggestion-item-content-1">
          <svg
            t="1762480226711"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="4686"
            width="24"
            height="24"
          >
            <path
              d="M463.535218 551.822222V472.007111c-0.910222-4.266667-1.706667-94.094222-1.706667-94.094222s1.308444-36.579556 1.308445-76.231111V168.504889c0-48.014222-23.495111-93.639111-63.488-124.928C364.09344 15.303111 317.615218 0 269.088996 0c-48.583111 0-95.004444 15.303111-130.787556 43.52-39.992889 31.288889-63.488 76.913778-63.488 124.928v383.601778A283.249778 283.249778 0 0 0 0.004551 745.130667a281.770667 281.770667 0 0 0 78.961778 197.233777A262.997333 262.997333 0 0 0 269.259662 1024a262.997333 262.997333 0 0 0 190.293334-81.692444 280.177778 280.177778 0 0 0 74.524444-147.114667l1.137778-92.046222-25.6-83.228445c-11.946667-24.746667-27.306667-47.786667-46.08-68.152889z m-61.895111 27.306667l9.671111 9.500444a218.510222 218.510222 0 0 1 65.080889 156.273778 215.722667 215.722667 0 0 1-60.472889 151.893333 202.524444 202.524444 0 0 1-293.774222 0 217.486222 217.486222 0 0 1-60.871112-151.893333c0-59.164444 23.552-115.768889 65.080889-156.273778l9.728-9.443555V168.391111c0-27.192889 13.824-54.101333 38.912-73.955555 24.917333-19.456 58.311111-30.492444 93.866667-30.492445s68.892444 11.036444 93.809778 30.492445c25.088 19.626667 38.968889 46.592 38.968889 73.955555v410.737778z"
              fill="#7e89f0"
              p-id="4687"
            ></path>
            <path
              d="M972.804551 307.2h-307.2a51.2 51.2 0 0 1 0-102.4h307.2a51.2 51.2 0 0 1 0 102.4z m-441.912889 373.134222l4.323556 22.869334a278.755556 278.755556 0 0 0-4.323556-22.869334zM665.604551 409.6h153.6a51.2 51.2 0 0 1 0 102.4h-153.6a51.2 51.2 0 0 1 0-102.4z m0 204.8h51.2a51.2 51.2 0 0 1 0 102.4h-51.2a51.2 51.2 0 0 1 0-102.4zM268.804551 863.687111c-68.152889 0-123.221333-56.832-123.221333-127.260444 0-51.996444 30.208-96.768 73.386666-116.565334V198.826667c0-21.276444 22.300444-38.855111 49.834667-38.855111s49.834667 17.351111 49.834667 38.855111v421.034666a127.146667 127.146667 0 0 1 73.102222 116.565334c0 70.200889-55.068444 127.260444-122.936889 127.260444zM509.615218 619.975111l25.6 83.228445-1.137778 92.046222s6.371556-27.306667 1.137778-92.046222l-4.323556-22.869334a288.369778 288.369778 0 0 0-21.276444-60.359111z"
              fill="#7e89f0"
              p-id="4688"
            ></path>
          </svg>
          <div class="suggestion-item-content-text">
            <div>体感温度</div>
            <div>微凉</div>
          </div>
        </div>
      </div>
      <div class="suggestion-item">
        <div class="suggestion-item-content suggestion-item-content-2">
          <svg
            t="1762481907537"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="5744"
            width="24"
            height="24"
          >
            <path
              d="M996.4 159.9c-23.4-17.2-56.5-16.2-98.5 3.2-82.5 38-168.6 44.1-259.8 50.6-74.7 5.3-152 10.8-235.1 33.5-166.1 45.1-270.2 193.1-318 452.5C54.2 740 27 783.1 3.6 828.6c-5.2 10.2-4.8 22.2 1.2 32 6 9.9 16.5 15.7 28.1 15.7h20.4c11.4 0 21.8-5.7 27.9-15.4 93-148 206.2-144.8 337.3-141.2 83.9 2.3 170.6 4.7 260.4-30.4 102.6-40.1 184.8-103.4 244.6-188 27-38.3 49.3-81 66.2-126.9 15.9-43.1 27.1-89.2 33.5-137.2 0.8-5.4 6.1-53.1-26.8-77.3z m-25.5 70.4c-15 113.5-75.4 317.6-311.1 409.9-79.8 31.2-161.1 29-239.7 26.8-70.2-1.9-136.5-3.8-201.3 16.3-32.9 10.2-62.2 25.1-89.4 45.4 48.4-62.8 106.3-118.7 173-167.2 92.4-67 207.9-110.2 363.3-136.1 14.4-2.4 24.1-16 21.7-30.4-2.2-12.9-13.3-22.1-26-22.1-1.4 0-2.9 0.1-4.4 0.4-79.4 13.2-148.2 30.8-210.3 53.6-66.6 24.5-123.9 54.5-175.3 91.8-41 29.7-78.8 62.1-113.4 97C207.2 436.1 292.4 331.9 416.8 298c78.2-21.3 152.8-26.6 225-31.8C738 259.5 828.8 253 920 211c25.8-11.9 40.4-12.1 45-8.6 5.5 3.9 7.1 18.9 5.9 27.9z"
              fill="#6B7280"
              p-id="5745"
            ></path>
          </svg>
          <div class="suggestion-item-content-text">
            <div>舒适度</div>
            <div>{{ getComfortLevel() }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="suggestion-content-type">
      {{ getSuggestedClothingType() }}
    </div>
    <div class="warning" v-if="getNoticeItems()">
      注意：{{ getNoticeItems() }}
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from "vue";
import { useWeatherStore } from "../store/weather";
import { useClothesStore } from "../store/clothes";
import { useRouter } from "vue-router";

const weatherStore = useWeatherStore();
const clothesStore = useClothesStore();
const router = useRouter();

// 状态
const loading = ref(false);
const weatherData = ref(null);
const recommendedOutfits = ref([]);
const defaultCoverImage =
  "https://dummyimage.com/600x400/eee/999&text=Outfit+Cover";

// 组件挂载时获取天气数据（优先使用缓存）
const getWeatherData = async () => {
  try {
    loading.value = true;
    // 尝试获取缓存数据
    const cachedData = weatherStore.getWeatherData();

    // 如果没有缓存数据，才发送API请求
    if (!cachedData) {
      await weatherStore.fetchWeatherData();
    }

    // 使用store中的天气数据
    if (weatherStore.currentWeather) {
      weatherData.value = {
        temperature: parseInt(
          weatherStore.currentWeather.temperature.replace("°C", "")
        ),
        condition: weatherStore.currentWeather.type, // 直接使用原始的中文天气状况
        humidity: parseInt(
          weatherStore.currentWeather.humidity.replace("%", "")
        ),
        wind: weatherStore.currentWeather.wind.replace(/[^0-9]/g, ""),
        minTemperature: parseInt(weatherStore.forecast[0]?.low || 0),
        maxTemperature: parseInt(weatherStore.forecast[0]?.high || 0),
        season: "spring",
      };
      console.log("获取到的天气数据:", weatherData.value);
    }

    // 获取推荐搭配
    getRecommendedOutfits();
  } catch (error) {
    console.error("获取天气数据失败:", error);
  } finally {
    loading.value = false;
  }
};

// 获取推荐搭配
const getRecommendedOutfits = () => {
  if (!weatherData.value) return;

  // 模拟推荐算法
  // 实际应用中应该根据天气、温度、季节等因素推荐合适的搭配
  const { temperature, season } = weatherData.value;

  // 这里使用模拟数据
  const outfits = [
    {
      id: "1",
      name: "休闲日常装",
      coverImage: "https://dummyimage.com/300x300/87CEFA/333&text=休闲日常",
      season: season || "all",
      minTemperature: temperature - 5,
      maxTemperature: temperature + 5,
    },
    {
      id: "2",
      name: "商务简约装",
      coverImage: "https://dummyimage.com/300x300/6495ED/333&text=商务简约",
      season: season || "all",
      minTemperature: temperature - 3,
      maxTemperature: temperature + 3,
    },
  ];

  recommendedOutfits.value = outfits;
};

// 获取天气状况文本（带emoji图标）
const getConditionText = (condition) => {
  // 直接使用中文天气状况并添加emoji图标
  const emojiMap = {
    晴: "☀️ 晴",
    多云: "⛅ 多云",
    阴: "☁️ 阴",
    小雨: "🌦️ 小雨",
    中雨: "🌧️ 中雨",
    大雨: "⛈️ 大雨",
    雷阵雨: "⛈️ 雷阵雨",
    雪: "❄️ 雪",
    雾: "🌫️ 雾",
    sunny: "☀️ 晴朗",
    cloudy: "⛅ 多云",
    rainy: "🌦️ 下雨",
    snowy: "❄️ 下雪",
    foggy: "🌫️ 雾天",
    windy: "💨 大风",
  };
  return emojiMap[condition] || condition;
};

// 获取空气质量描述
const getAQIDescription = (aqi) => {
  if (!aqi) return "未知";
  if (aqi <= 50) return "优";
  if (aqi <= 100) return "良";
  if (aqi <= 150) return "轻度污染";
  if (aqi <= 200) return "中度污染";
  if (aqi <= 300) return "重度污染";
  return "严重污染";
};

// 获取舒适度
const getComfortLevel = () => {
  if (!weatherData.value) return "未知";

  const { temperature, humidity } = weatherData.value;

  if (
    temperature >= 20 &&
    temperature <= 26 &&
    humidity >= 40 &&
    humidity <= 60
  ) {
    return "舒适";
  } else if (temperature > 30) {
    return "较热";
  } else if (temperature < 10) {
    return "较冷";
  } else if (humidity > 80) {
    return "潮湿";
  } else if (humidity < 30) {
    return "干燥";
  }
  return "一般";
};

// 获取推荐穿搭类型
const getSuggestedClothingType = () => {
  if (!weatherData.value) return "未知";

  const { temperature } = weatherData.value;

  if (temperature >= 30) {
    return "今天天气炎热，容易出汗，建议选择宽松透气的衣物，像短袖 T 恤、运动短裤，让身体保持清爽不闷汗。";
  } else if (temperature >= 25) {
    return "今天有点闷热但不算酷热，建议穿宽松透气的衣物，比如棉麻 T 恤、薄款七分裤，既能吸汗又不会太单薄。";
  } else if (temperature >= 20) {
    return "今天温暖偏热，容易轻微出汗，建议穿宽松透气的衣物，比如短袖 T 恤、薄款休闲裤，材质选棉或冰丝，保持身体清爽不闷汗。";
  } else if (temperature >= 15) {
    return "今天天气偏暖，体感清爽，建议穿透气舒适的衣物，像薄款衬衫、棉麻长裤，或短袖 T 恤搭配薄外套，兼顾舒适与应对小幅温差。";
  } else if (temperature >= 10) {
    return "今天气温适宜，体感温暖，建议穿宽松舒适的衣物，比如纯棉 T 恤、针织开衫 + 休闲长裤，早晚温差大，外搭方便增减。";
  } else if (temperature >= 0) {
    return "今天气温较低，早晚寒意重，建议穿保暖且兼具灵活性的衣物，比如薄款羽绒服、加绒牛仔裤，内搭打底衫，外层防风内层锁温，避免着凉。";
  } else {
    return "今天气温偏低，寒意明显，建议穿保暖又轻便的衣物，比如加绒卫衣、厚款牛仔裤，内搭薄毛衣，兼顾保暖与活动便利。";
  }
};

// 获取注意事项
const getNoticeItems = () => {
  if (!weatherData.value) return "无";

  const { condition, wind } = weatherData.value;
  const notices = [];

  // 同时支持中文和英文的天气状况
  const isRainy =
    condition === "小雨" ||
    condition === "中雨" ||
    condition === "大雨" ||
    condition === "雷阵雨" ||
    condition === "雪";
  const isSunny = condition === "晴";

  if (isRainy) {
    notices.push("今天有雨，出门记得带雨伞，注意防滑。");
  } else if (isSunny) {
    notices.push("今天紫外线较强，长时间户外活动请注意防晒。");
  }

  if (wind && parseInt(wind) >= 5) {
    notices.push("今天会有大风，记得防风。");
  }

  return notices.length > 0 ? notices.join("·") : null;
};

// 组件挂载时调用
getWeatherData();
</script>

<style scoped>
.weather-suggestion-section {
  background-color: #fff;
  border-radius: 24px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.section-header {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin: 0 0 20px 0;
}

.suggestion-content {
  display: flex;
  padding-bottom: 18px;
  border-bottom: 1px solid #f3f4f6;
}
.suggestion-item {
  flex: 1;
}
.suggestion-item:nth-child(1) {
  background-color: #f3f4f6;
  border-radius: 12px 0 0 12px;
  overflow: hidden;
}
.suggestion-item:nth-child(2) {
  background-color: #e9eaff;
  border-radius: 0 12px 12px 0;
  overflow: hidden;
}
.suggestion-item-content {
  padding: 16px;
  display: flex;
  gap: 15px;
  align-items: center;
}
.suggestion-item-content-1 {
  border-radius: 0 30px 0 0;
  background-color: #e9eaff;
}
.suggestion-item-content-2 {
  border-radius: 0 0 0 30px;
  background-color: #f3f4f6;
}

.suggestion-item-content-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.suggestion-item-content-text div:nth-child(1) {
  color: #000000;
}
.suggestion-item-content-text div:nth-child(2) {
  /* font-size: 16px;
  font-weight: bold; */
  color: #999999;
}
.suggestion-content-type {
  margin-top: 20px;
  color: #999999;
}
.warning {
  background-color: #fef9c3;
  color: #854d0e;
  padding: 16px;
  margin-top: 20px;
  border-radius: 12px;
}

/* 天气概览 - 左右排列布局 */
.weather-overview {
  margin-bottom: 24px;
  border-radius: 12px;
  padding: 20px;
  overflow: hidden;
}

.weather-info {
  display: flex;
  align-items: flex-start;
  gap: 30px;
  width: 100%;
}

/* 左侧：温度和天气状况 */
.temperature-weather {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.temperature {
  padding: 16px;
}

.temp-value {
  font-size: 64px;
  font-weight: 700;
  color: #ff6b6b;
  line-height: 1;
  letter-spacing: -2px;
  display: inline-block;
  margin-bottom: 8px;
}

.temp-range {
  font-size: 16px;
  color: #666;
  display: block;
  font-weight: 500;
}

.weather-condition {
  font-size: 22px;
  color: #333;
  font-weight: 600;
  text-align: center;
  margin-bottom: 8px;
}

/* 右侧：详细信息 */
.weather-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.weather-details-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.air-quality,
.wind-info,
.humidity-info {
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 14px;
  color: #555;
  font-weight: 500;
  background-color: #f8f9fa;
}

/* 建议卡片 */
.suggestion-cards {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.suggestion-card {
  flex: 1;
  background-color: #f8f9fa;
  border-radius: 8px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.suggestion-card .card-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.card-content .card-title {
  font-size: 14px;
  color: #666;
  margin-bottom: 4px;
}

.card-content .card-value {
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

/* 推荐搭配 */
.recommended-outfits {
  margin-bottom: 20px;
}

.outfits-header h4 {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin: 0 0 12px 0;
}

.outfits-list {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 8px;
}

.outfit-item {
  flex-shrink: 0;
  width: 120px;
  text-align: center;
  cursor: pointer;
}

.outfit-item img {
  width: 120px;
  height: 120px;
  border-radius: 8px;
  object-fit: cover;
  margin-bottom: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.outfit-item span {
  font-size: 14px;
  color: #333;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 搭配提示 */
.suggestion-tips {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.tip-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: #666;
}

/* 加载和空状态 */
.loading-state,
.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: #999;
}

.empty-state .van-icon {
  margin-bottom: 12px;
}

/* 滚动条样式 */
.outfits-list::-webkit-scrollbar {
  height: 6px;
}

.outfits-list::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.outfits-list::-webkit-scrollbar-thumb {
  background: #c0c4cc;
  border-radius: 3px;
}

.outfits-list::-webkit-scrollbar-thumb:hover {
  background: #909399;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .weather-suggestion-section {
    padding: 16px;
  }

  .weather-info {
    flex-direction: row;
    gap: 12px;
    align-items: flex-start;
  }

  .temperature-weather {
    flex: 1;
  }

  .temp-value {
    font-size: 36px;
  }

  .weather-condition {
    font-size: 18px;
  }

  .weather-details {
    flex: 1;
  }

  .air-quality,
  .wind-info,
  .humidity-info {
    font-size: 12px;
    padding: 8px 12px;
  }

  .suggestion-cards {
    flex-direction: column;
  }

  .outfits-list {
    gap: 8px;
  }

  .outfit-item {
    width: 80px;
  }

  .outfit-item img {
    width: 80px;
    height: 80px;
  }
}

/* 暗黑模式适配 */
@media (prefers-color-scheme: dark) {
  .weather-suggestion-section {
    background-color: #1e1e1e;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  }

  .section-header h3,
  .weather-condition,
  .card-content .card-value,
  .outfits-header h4,
  .outfit-item span {
    color: #f0f0f0;
  }

  .temp-range,
  .air-quality,
  .wind-info,
  .humidity-info,
  .card-content .card-title,
  .tip-item {
    color: #b0b0b0;
  }

  /* 暗黑模式下的天气概览样式 */
  .air-quality,
  .wind-info,
  .humidity-info {
    background-color: #2a2a2a;
  }

  .suggestion-card {
    background-color: #2a2a2a;
  }

  .suggestion-card .card-icon {
    background-color: #3a3a3a;
  }

  .loading-state,
  .empty-state {
    color: #707070;
  }
}
</style>
